<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>inline-block实现水平居中</title>
        <style>
            .pagination {
              text-align: center;
              font-size: 0;
              letter-spacing: -4px;
              word-spacing: -4px;
            }
            .pagination li {
              line-height: 25px;
              margin: 0 5px;
            display: inline-block;
              *display: inline;
              zoom:1;
              letter-spacing: normal;  
              word-spacing: normal;
              font-size: 12px;
            }
            .pagination a {
              display: block;
              color: #f2f2f2;
              text-shadow: 1px 0 0 #101011;
              padding: 0 10px;
              border-radius: 2px;
              box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
              background: -webkit-linear-gradient(top,#434345,#2f3032);
            }
            .pagination a:hover {
              text-decoration: none;
              box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
              background: linear-gradient(top,#f48b03,#c87100);
              background: -webkit-linear-gradient(top,#f48b03,#c87100);
            }
        </style>
    </head>
    <body>
        <h1>六种实现元素水平居中</h1>
        <p>来源:<a href="https://www.w3cplus.com/css/elements-horizontally-center-with-css.html">https://www.w3cplus.com/css/elements-horizontally-center-with-css.html</a></p>
        <div class="pagination">
          <ul>
            <li><a href="#">Prev</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">Next</a></li>
          </ul>
        </div>
    </body>
</html>